<template>
  <div class="comment_item_body">
    <div class="comment_item_avatar">
      <el-avatar :src="commentData.portrait"></el-avatar>
    </div>
    <div class="comment_item_right">
      <div><span class="comment_item_nickName">{{commentData.nickName}}</span></div>
      <div><p>{{commentData.commentContent}}</p></div>
      <div>
        <span class="time">{{commentData.createTime}}</span>
        <span class="reply" @click="openCommentSend">回复</span>
        <div></div>
      </div>
      <div class="comment_reply">
        <span style="cursor:pointer" @click="changeReplyShowStatus" v-if="commentData.replyNum!==0">
          共{{commentData.replyNum}}回复,{{replyInfo}}
        </span>
        <commentReplyList v-if="replyShowStatus"
          :replyList="dataList"
          :pageData='pageData'
          @replyEvent='handlerReplyEvent'
          @pageChangeEvent="handlerPageChange" >
        </commentReplyList>
        <!-- <page></page> -->
      </div>
      <commentSend v-if="replySendShowStatus"
        :placeholder="placeholder" @commentSubmitEvent="handlerCommentSubmit"></commentSend>
    </div>
  </div>
</template>

<script>
import commentSend from './comment-send'
import commentReplyList from './comment-reply-list'
import page from '../common/page/page'
export default {
  components: {
    commentSend,
    commentReplyList,
    page,
  },
  mounted() {
    // this.getDataList(); // 这里获取，但是此时不需要显示，而是在初次折叠展开时获取显示。
  },
  props:{
      commentData: Object,
      infoData: Object,
  },
  data() {
    return {
      replySendShowStatus: false,
      replySendShowStatusMyself: false,
      replyShowStatus: false,
      replyFirstRequest: true,
      replyInfo: '展开',
      placeholder: '',

      // 回复 列表
      dataList: [/*
        {
          replyId:1,
          fromId:2,
          toId:1,
          infoId:1,
          commentId:1,
          replyType:1,
          replyContent:"回复评论1",
          createTime:"2021/05/10 19:12:13",
          fromNickName:'老朱',
          fromPortrait:'',
          toNickName:'老张',
        },{
          replyId:2,
          fromId:1,
          toId:2,
          infoId:1,
          commentId:1,
          replyType:0,
          replyContent:'回复回复1',
          createTime:'2021/05/10 19:12:55',
          fromNickName:'老张',
          fromPortrait:'',
          toNickName:'老朱',
        },*/
      ],
      pageData:{
        currentPage: 1,
        pageSize: 5,
        totalPage: this.commentData.replyNum,
      },
      

      replySubmitData:{
        "fromId": this.currentUser.user.uid,
        "toId": 0,
        "commentId": this.commentData.commentId,
        "infoId": this.infoData.infoId,
        "replyType": 0,
        "replyContent": '',
      }
    }
  },
  methods: {
    // 对 评论 回复 时，打开评论输入框
    openCommentSend(){
      this.placeholder =  '回复 @'+this.commentData.nickName+' :';
      let _replySubData = this.replySubmitData;
      _replySubData.toId = this.commentData.uid;
      _replySubData.replyType = 1;
      // 关闭
      if(this.replySendShowStatus && this.replySendShowStatusMyself){
        this.replySendShowStatus = false;
      }else if(!this.replySendShowStatus){ // 打开
        this.replySendShowStatus = true;
      }
      
      this.replySendShowStatusMyself = true;
      // console.log("对评论进行回复", this.placeholder)
    },
    // 对 回复组件 的展示
    changeReplyShowStatus(){
      // this.replyShowStatus = !this.replyShowStatus;
      if(this.replyFirstRequest){
        this.getDataList();
        this.replyFirstRequest = false;
      }
      if(this.replyShowStatus){
        this.replyShowStatus = false;
        this.replyInfo = '展开'
      }else{
        this.replyShowStatus = true;
        this.replyInfo = '收起'
      }

    },
    // 对 回复进行回复，打开评论回复输入框
    handlerReplyEvent(data){
      this.placeholder = '回复 @'+ data.fromNickName +' :';
      let _replySubData = this.replySubmitData;
      _replySubData.toId = data.fromId;
      _replySubData.replyType = 0;
      this.replySendShowStatusMyself = false;
      if(!this.replySendShowStatus){
        this.replySendShowStatus = true;
      }
    },
    // 处理 评论回复 请求【增加 reply】
    handlerCommentSubmit(comment){
      this.replySubmitData.replyContent = comment;
      var data = this.replySubmitData;
      console.log("需提交评论的回复:", data);
      this.$http1({
        url: this.$http.adornUrl("/user/info/comment/reply/save"),
        method: "post",
        data: this.$http.adornData(data, false)
      }).then(({ data }) => {
        this.infoData.commentNum++;
        this.commentData.replyNum++;
        this.getDataList();
      });
    },
    // 分页获取 reply【分页获取】
    getDataList(){
      console.log("tips：分页获取reply")
      var data={
        page: ''+this.pageData.currentPage,
        limit: ''+this.pageData.pageSize,
        sidx:'create_time',
        order: 'desc',
      }
      this.$http1({
        url: this.$http.adornUrl(`/user/info/comment/reply/list/${this.commentData.commentId}`),
        method: "post",
        data: this.$http.adornData(data, false)
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: "回复!",
        });
        this.dataList = data.page.list;
        this.pageData.totalPage = data.page.totalPage;
        
      });
    },
    // 页码发生修改，重新获取 reply
    handlerPageChange(data){
      this.pageData.currentPage = data;
      
      this.getDataList();
    },
  },
}
</script>

<style>
.comment_item_body{
  display: flex;
  margin-top: 5px;
  padding-top: 5px;
  /* background: rgb(215, 255, 151); */
  border-top: 1px solid #fff;
}
.comment_item_avatar{
  margin: 0px 20px 0px 0px;
}
.comment_item_right{
  
}
.comment_item_nickName{
  font-size: 16px;
  cursor: pointer;
}
.comment_item_right .time{
  color: #666;
  margin-right: 20px;
}
.comment_item_right .reply{
  cursor: pointer;
}

.comment_reply{
  margin-top: 10px ;
}
</style>